<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Page title -->
    <title>系统安装</title>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="__STATIC__/static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="__STATIC__/static/adminlte/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="__STATIC__/static/adminlte/css/skins/_all-skins.min.css">
    <!-- sweetalert -->
    <link rel="stylesheet" href="__STATIC__/static/sweetalert/sweet-alert.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="__STATIC__/static/js/html5shiv.min.js"></script>
    <script src="__STATIC__/static/js/respond.min.js"></script>
    <![endif]-->
    <style>
        .check label{width: 200px;}
    </style>
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
  <!-- Full Width Column -->
  <div class="content-wrapper">
    <div class="container">
      <!-- Main content -->
      <section class="content">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-fw fa-desktop text-light-blue"></i> 系统安装</h3>
          </div>
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#step_1">许可协议</a></li>
              <li><a href="#step_2">系统兼容性</a></li>
              <li><a href="#step_3">系统配置</a></li>
              <li><a href="#step_4">安装完成</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="step_1">
                <p class="text-red">请阅读下面的许可条款：</p>
                <div class="text-muted" style="height:300px; border:1px solid #ccc; margin-bottom:8px; padding:5px; background:#fff; overflow: auto; overflow-x:hidden; overflow-y:scroll;">
                <p>使用该许可证的软件被授予以下权限，免费，任何人可以得到这个软件及其相关文档的一个拷贝，并且经营该软件不受任何限制，包括无限制的使用、复制、修改、合并、出版、发行、发放从属证书、或者出售该软件的拷贝的权利。</p>
                <p>该软件按本来的样子提供，没有任何形式的担保，不管是明确地或者暗含的，包含这些但是不受商业性质的担保的限制。适合一个特定的用途并且不受侵犯。福州百家威信信息技术有限责任公司在任何场合对使用该软件涉及的任何要求、损害或者其他责任都不应负责。不管它是正在起作用还是只是合同形式、民事侵权或是其他方式，如由它引起，在其作用范围内、与该软件有联系、该软件的使用或者有这个软件引起的其他行为。</p>
                <h3>有限担保和免责声明</h3>
                <p>1、本软件及所附带的文件是作为不提供任何明确的或隐含的赔偿或担保的形式提供的。</p>
                <p>2、用户出于自愿而使用本软件，您必须了解使用本软件的风险，在尚未购买产品技术服务之前，我们不承诺对免费用户提供任何形式的技术支持、使用担保，也不承担任何因使用本软件而产生问题的相关责任。</p>
                <p>3、电子文本形式的授权协议如同双方书面签署的协议一样，具有完全的和等同的法律效力。您一旦开始确认本协议并安装本程序，即被视为完全理解并接受本协议的各项条款，在享有上述条款授予的权力的同时，受到相关的约束和限制。协议许可范围以外的行为，将直接违反本授权协议并构成侵权，我们有权随时终止授权，责令停止损害，并保留追究相关责任的权力。</p>
                <p>4、本合同最终解释权归软件作者所有。</p>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox"> <span>我同意上述条款和条件。</span>
                          </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-primary pull-right btn-flat">下一步</button>
                    </div>
                </div>
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="step_2">
                <div class="check">
                <p><label>PHP版本(最低PHP 5.4)：</label><span class="text-green">检查通过</span></p>
                <p><label>./config 文件夹读写：</label><span class="text-green">检查通过</span></p>
                <p><label>./runtime 文件夹读写：</label><span class="text-green">检查通过</span></p>
                <p><label>./upload 文件夹读写：</label><span class="text-green">检查通过</span></p>
                <p><label>pdo_mysql：</label><span class="text-green">检查通过</span></p>
                <p><label>pathinfo：</label><span class="text-green">检查通过</span></p>
                <p><label>mbstring：</label><span class="text-red">不通过</span></p>
                <button type="submit" class="btn btn-primary btn-flat">下一步</button>
                </div>
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="step_3">
                <div class="row">
                  <div class="col-md-6">
                    <div class="box box-solid">
                        <div class="box-header with-border">
                          <h3 class="box-title">设置数据库连接信息</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">主机</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="hostname" value="localhost" class="form-control">
                                  </div>
                                  <div class="col-sm-5">数据库服务器地址
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">端口</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="hostport" value="3306" class="form-control">
                                  </div>
                                  <div class="col-sm-5">端口(默认:3306)
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">用户</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="username" value="root" class="form-control">
                                  </div>
                                  <div class="col-sm-5">数据库账户
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">密码</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="password" value="" class="form-control">
                                  </div>
                                  <div class="col-sm-5">数据库密码
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">表前缀</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="prefix" value="kite_" class="form-control">
                                  </div>
                                  <div class="col-sm-5">自定义表前缀以下划线'_'结尾
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-2 control-label">数据库名</label>
                                  <div class="col-sm-5">
                                    <input type="text" name="database" class="form-control">
                                  </div>
                                  <div class="col-sm-5">要连接的数据库名称(连接前先创建数据库)
                                  </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.box-body -->
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="box box-solid">
                        <div class="box-header with-border">
                          <h3 class="box-title">设置管理员帐户</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">账户</label>
                                    <div class="col-sm-5">
                                        <input type="text" name="username" class="form-control">
                                    </div>
                                    <div class="col-sm-5">设置后台管理员账户
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">密码</label>
                                    <div class="col-sm-5">
                                        <input type="password" name="password" class="form-control">
                                    </div>
                                    <div class="col-sm-5">用户后台登陆密码
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">确认密码</label>
                                    <div class="col-sm-5">
                                        <input type="password" name="repassword" class="form-control">
                                    </div>
                                    <div class="col-sm-5">请再次确认
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>
        <!-- /.box -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="__STATIC__/static/jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__STATIC__/static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="__STATIC__/static/adminlte/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="__STATIC__/static/adminlte/js/demo.js"></script>
<!-- sweetalert -->
<script src="__STATIC__/static/sweetalert/sweet-alert.min.js"></script>
</body>
</html>
